import Image from "next/image";
import { Suspense, use } from "react";
async function Posts() {
  const data = await fetch("http://127.0.0.1:8088/api/common");
  const posts = await data.json();
  return (
    <ul>
      {(posts || []).map((post: any) => (
        <li key={post.name}>{post.name}</li>
      ))}
    </ul>
  );
}

async function FrontPosts() {
  "use client";
  const data = await fetch("http://127.0.0.1:8088/api/common");
  const posts = await data.json();
  return (
    <ul>
      {(posts || []).map((post: any) => (
        <li key={post.name}>{post.name}</li>
      ))}
    </ul>
  );
}
async function StaticGeneration({ title }: { title: string }) {
  return (
    <div>
      StaticGeneration {title}
      <div>
        <Image
          width={100}
          height={100}
          src="/test.png"
          alt="Picture of the author"
        />
      </div>
      {/* <Suspense fallback={<div>正在后台加载数据</div>}>
        <Posts />
      </Suspense>
      <Suspense fallback={<div>正在前台加载数据</div>}>
        <FrontPosts />
      </Suspense> */}
    </div>
  );
}

// 此函数在构建时被调用
// export async function getStaticProps() {
//     // 调用外部 API 获取博文列表
//     const res = await fetch('https://.../posts')
//     const { title } = await res.json()

//     // 通过返回 { props: { posts } } 对象，Blog 组件
//     // 在构建时将接收到 `posts` 参数
//     return {
//         props: {
//             title,
//         },
//     }
// }

export default StaticGeneration;
